<template>
  <div>
    <basicModal @register="modalRegister" ref="modalRef" class="basicModal" @on-ok="okModal">
      <template #default>
        <fs-crud ref="crudRef" v-bind="crudBinding" />
      </template>
    </basicModal>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, reactive, toRefs,onMounted } from 'vue';
  import { useMessage } from 'naive-ui';
  import { useCrud,useExpose } from '@fast-crud/fast-crud';
  import createCrudOptions from './crud';
  import { basicModal, useModal } from '@/components/Modal';

  export default defineComponent({
    name: 'StaffSelector',
    components: { basicModal },
    setup() {
      const modalRef: any = ref(null);
      const message = useMessage();  
      // crud组件的ref
      const crudRef = ref();
      // crud 配置的ref
      const crudBinding = ref();
      // 暴露的方法
      const { expose } = useExpose({ crudRef, crudBinding });
      // 你的crud配置
      const { crudOptions } = createCrudOptions({ expose });
      // 初始化crud配置
      // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
      const { resetCrudOptions } = useCrud({ expose, crudOptions });

      const [modalRegister, { openModal, closeModal, setSubLoading }] = useModal({
        title: '选择员工',
      });

      async function okModal() {
        const formRes = await submit();
        if (formRes) {
          closeModal();
          message.success('提交成功');
        } else {
          message.error('验证失败，请填写完整信息');
          setSubLoading(false);
        }
      }

      function showModal() {
        openModal();
      }

      function handleReset(values: Recordable) {
        console.log(values);
      }
      
      // 页面打开后获取列表数据
      onMounted(() => {
        expose.doRefresh();
      });

      return {
        modalRef,
        modalRegister,
        handleReset,
        showModal,
        okModal,
        crudBinding,
        crudRef,
      };
    },
  });
</script>

<style lang="less">
  .n-dialog.basicModal {
    width: 640px;
  }
</style>
